<template>
	<view class="content">
		<view class="zhuige-classify">
			<!-- 左侧 -->
			<scroll-view class="zhuige-classify-key" scroll-y scroll-with-animation>
				<view v-for="(tab, index) in tabs" :key="index" :class="cur_tab==tab.id?'active':''"
					@click="clickTab(tab)"><text>{{tab.name}}</text></view>
			</scroll-view>

			<!-- 右侧 -->
			<scroll-view class="zhuige-classify-side" scroll-top="scrollTop" scroll-y scroll-with-animation>
				<!-- 轮播 -->
				<!-- <view v-if="cur_tab=='rec'" class="zhuige-classify-swiper"> -->
				<!-- <view class="zhuige-classify-swiper">
					<zhuige-swiper type="zhuige-mini-swiper" :items="slides"></zhuige-swiper>
				</view> -->
				<!-- 圈子列表 -->
				<view class="zhuige-classify-side-list">
					<view class="zhuige-block">
						<view v-for="(forum, index) in forums" :key="index" @click="clickForum(forum.id)"
							class="jiangqie-news-block image-wide">

							<image :src="forum.cover" mode="aspectFill" class="jiangqie-news-image"></image>
							<view class="jiangqie-news-text">
								<view class="jiangqie-news-title jiangqie-news-no-excerpt">
									{{forum.title}}
								</view>
								<view class="jiangqie-news-info">
									<view class="jiangqie-news-cmt">
										<image src="/static/images/ctm3.png" mode="aspectFill"></image>
										{{forum.collectNum}}
									</view>
									<view class="jiangqie-news-cmt">
										<image src="/static/images/laud.png" mode="aspectFill"></image>
										{{forum.likesNum}}
									</view>
									<view class="jiangqie-news-cmt">
										<image src="/static/images/ctm2.png" mode="aspectFill"></image>
										{{forum.viewsNum}}
									</view>
									<text class="jiangqie-news-time">{{forum.publishTime}}</text>
								</view>
							</view>
						</view>

						<zhuige-nodata v-if="forums.length==0"></zhuige-nodata>
					</view>

				</view>
				<uni-load-more v-if="forums && forums.length>0" :status="loadMore"></uni-load-more>
			</scroll-view>
			<!-- 创建圈子按钮 -->
			<!-- 	<view v-if="is_show_create_forum" @click="openLink('/pages/bbs/forum-create/forum-create')"
				class="zhuige-classify-creat">
				<view>建圈</view>
			</view> -->

		</view>

	</view>
</template>

<script>
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';
	import Auth from '@/utils/auth';

	import ZhuigeSwiper from "@/components/zhuige-swiper";
	import ZhuigeNodata from "@/components/zhuige-nodata";

	export default {
		data() {
			this.loginReload = false;

			return {
				slides: [],

				tabs: [],
				cur_tab: undefined,

				is_show_create_forum: undefined,

				forums: [],


				loadMore: 'more',
			}
		},

		components: {
			ZhuigeSwiper,
			ZhuigeNodata
		},

		onLoad(options) {

			// 加载顶部轮播图
			// this.loadSwiper();


			Util.addShareScore(options.source);

			this.loadForumCats();

			uni.$on('zhuige_event_user_login', this.onSetReload);
			uni.$on('zhuige_event_user_join_forum', this.onSetReload);
		},

		onShow() {
			if (this.loginReload) {
				this.loginReload = false;

				this.loadForumCats();
			}
		},

		onUnload() {
			uni.$off('zhuige_event_user_join_forum', this.onSetReload);
			uni.$off('zhuige_event_user_login', this.onSetReload);
		},

		onShareAppMessage() {
			return {
				title: '圈子-' + getApp().globalData.appName,
				path: Util.addShareSource('pages/tabs/forum/forum?n=n')
			};
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return {
				title: '圈子-' + getApp().globalData.appName,
			};
		},
		// #endif


		onReachBottom() {
			if (this.loadMore == 'more') {
				this.loadForums(false);
			}
		},


		methods: {
			//----- event start -----
			/**
			 * 登录事件
			 */
			onSetReload(data) {
				this.loginReload = true;
			},
			//----- event end -----

			/**
			 * 点击打开链接
			 */
			openLink(link) {
				Util.openLink(link);
			},

			/**
			 * 点击切换分类
			 */
			clickTab(tab) {
				this.cur_tab = tab.id;

				this.loadForums(true);
			},

			/**
			 * 点击圈子
			 */
			clickForum(id) {
				// Util.openLink('/pages/bbs/forum/forum?forum_id=' + id);

				Util.openLink('/pages/bbs/detail/detail?topic_id=' + id);
			},
			// 加载轮播图
			loadSwiper() {
				Rest.get(Api.loadSwiper).then(res => {
					if (res.success) {
						this.slides = res.result;
					}
				}, err => {
					console.log(err)
				});
			},
			/**
			 * 根据分类加载文章
			 */
			loadForums(refresh) {
				let params = {
					offset: refresh ? 0 : this.forums.length
				};
				params.pageSize = Auth.getConfig().lable_page_size;
				params.sortId = this.cur_tab;
				Rest.get(Api.queryArticleBySortId, params).then(res => {
					// this.forums = res.result.data;
					this.forums = refresh ? res.result.data : this.forums.concat(res.result.data);
					this.loadMore = res.result.lastPage === 'nomore' ? 'nomore' : 'more';
				}, err => {
					console.log(err)
				});
			},

			/**
			 * 加载分类
			 */
			loadForumCats() {
				Rest.get(Api.querySortAll).then(res => {
					this.tabs = res.result.tabs;

					if (!this.cur_tab) {
						this.cur_tab = res.result.cur_tab;
					}
					this.loadForums(true);
				}, err => {
					console.log(err)
				});
			}
		}
	}
</script>

<style>
	.content {

		/* position: fixed; */
		height: 100%;
		width: 100%;
	}

	.zhuige-classify {
		display: flex;
		height: 100%;
		overflow-y: scroll;
		width: 100%;
	}

	.zhuige-classify-key {
		position: fixed;
		margin-bottom: 0px;
		width: 25%;
		background: #FFFFFF;
		border-radius: 0 12rpx 12rpx 0;
	}

	.zhuige-classify-key::-webkit-scrollbar {
		display: none;
	}

	.zhuige-classify-key view {
		height: 120rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: left;
		padding-left: 40rpx;
		font-weight: 500;
	}

	.zhuige-classify-key view.active {
		background: #f5f5f5;
	}

	.zhuige-classify-key view text {
		color: #555555;
		font-weight: 400;
	}

	.zhuige-classify-key view.active text {
		font-weight: 600;
		font-size: 32rpx;
		color: #010101;
	}

	.zhuige-classify-side {
		margin-left: 25%;
		width: 75%;
		height: 100%;
		overflow-y: scroll;
		background: #f5f5f5;
	}

	.zhuige-classify-swiper {
		padding: 0 20rpx 20rpx;
	}

	.zhuige-classify-creat {
		position: fixed;
		z-index: 19;
		right: 40rpx;
		bottom: 160rpx;
		background: #010101;
		height: 96rpx;
		width: 96rpx;
		line-height: 96rpx;
		border-radius: 50%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}



	.jiangqie-news-block {
		position: relative;
		padding: 30rpx 0;
		min-height: 160rpx;
		border-bottom: 1rpx solid #DDD;
		padding-right: 260rpx;
	}

	.jiangqie-news-block:last-child {
		border: none;
	}

	.image-wide {
		padding-right: 0;
	}

	.image-wide .jiangqie-news-image {
		height: 320rpx;
		width: 100%;
		margin-right: 0rpx;
		/* margin-bottom: 10rpx; */
		clear: both;
		float: none;
		border-radius: 16rpx;
	}

	.jiangqie-news-text {
		text-align: left;
	}

	.jiangqie-news-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 550;
		line-height: 50rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.jiangqie-news-describe {
		font-size: 26rpx;
		color: #999;
		line-height: 30rpx;
		margin-bottom: 18rpx;
	}

	.jiangqie-news-info {
		font-size: 22rpx;
		color: #BBB;
		vertical-align: bottom;
		height: 26rpx;
	}

	.jiangqie-news-cmt {
		float: right;
		padding-right: 4rpx;
		margin-right: 10px;
	}

	.jiangqie-news-cmt image {
		vertical-align: middle;
		height: 24rpx;
		width: 24rpx;
		margin-right: 8rpx;
		border-radius: 10rpx;
	}

	.jiangqie-news-time {
		float: left;
		padding-left: 10rpx;
	}
</style>
